import React, { Component } from 'react'
import PropTypes from 'prop-types'
import water from 'images/index/weather/water.png'
class Day extends Component {
  render() {
    if (!this.props.day) {
      return (<div className='someday' style={{ backgroundColor: '#dcfcff' }}>
        <div className='week'>
        </div>
        <div className='day'>
          <div className='temp'>
          </div>
          <div className='icon-weather'></div>
        </div>
      </div>)
    }
    const { day: { minTemp, maxTemp, pcpn: rainfall, condCodeD: weatherCode, dayNickName } } = this.props
    const bgColor = 
      weatherCode === 100 ? '#dcf1ff'
        : weatherCode === 101 ? '#fffbdc'
          : '#dcfcff'
    return (
      <div className='someday' style={{ backgroundColor: bgColor}}>
        <div className='week'>
          <div className='icon-weather'>
            <img src={weatherCode && require(`images/index/weather/cond-icon-heweather/${weatherCode}.png`)} alt="" />
          </div>
          <span>{dayNickName}</span>
        </div>
        <div className='day'>
          <div className='temp'>
            <span className='high'>{Number(maxTemp).toFixed()}</span>
            <span className='separate'>/</span>
            <span className='low'>{Number(minTemp).toFixed()}</span>
            <span className='unit'>℃</span>
          </div>
          <div className='water'>
            <img src={water} alt="" />
            <span className='rainfall'>{Number(rainfall).toFixed()}%</span>
          </div>
        </div>
      </div>
    )
  }
}
Day.propTypes = {
  day: PropTypes.object,
}
export default Day
